<template>
  <div>
    <a-card class="card-header">
      <a-form-model :model="queryParam">
        <a-row :gutter="24">
          <a-col :span="5">
            <a-form-model-item
              label="出库单号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-model.trim="queryParam.outStoreNum"
                placeholder="请输入出库单号"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item
              label="备料单号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-model.trim="queryParam.materialPrepareNum"
                placeholder="请输入备料单号"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="2">
            <a-button
              type="primary"
              style="margin-top:14px"
              @click="handleSearch"
              >查询</a-button
            >
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>

    <!-- 表格区域 -->
    <a-card class="card-content">
      <a-row :gutter="24">
        <a-col :span="2"><div class="requiredNews">出库明细</div></a-col>
        <a-col :span="20"></a-col>
        <a-col :span="2">
          <a-button type="primary" @click="handleAllList"
            >全部出库单</a-button
          ></a-col
        >
      </a-row>

      <br />
      <a-table
        :columns="goodColumns"
        :data-source="tableData"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="(record, index) => index"
      >
        <template slot="action" slot-scope="text, record">
          <div>
            <a-popconfirm
              v-if="record.outStoreStatus !== 1"
              okText="确定"
              cancelText="取消"
              title="确定签收吗?"
              @confirm="() => handleOrderReceiving(record)"
            >
              <a>签收</a>
            </a-popconfirm>
            <a-divider type="vertical" v-if="record.outStoreStatus !== 1" />
            <a @click="handleWorkResume(record)">商品明细</a>
            <a-divider type="vertical" />
            <a-icon
              type="qrcode"
              @click.stop="handleCode(record)"
              style="fontSize: 16px;color: #40a9ff;"
            />
          </div>
        </template>
      </a-table>
    </a-card>
    <GoodResume ref="GoodResume"></GoodResume>
    <WareEditModal ref="modalForm" @ok="modalFormOk"></WareEditModal>

    <!-- 二维码 -->
    <qrCode
      ref="qrCode"
      :label="qrModel.label"
      :text="qrModel.text"
      :qrSize="320"
    ></qrCode>
  </div>
</template>

<script>
import { goodColumns } from "./components/tableConfig";
import api from "@/api/apiServer";
import { tableMinxins } from "@/unit/mixins/tableMinxins.js";
import GoodResume from "./components/goodResume.vue";
import WareEditModal from "./components/WareEditModal.vue";
import qrCode from "@/components/qrCode";
import { CodeNo } from "@/unit/QRCodeConfig";

export default {
  mixins: [tableMinxins],
  components: { GoodResume, WareEditModal, qrCode },
  data() {
    return {
      goodColumns,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
      model: {},
      tableData: [],
      qrModel: {
        label: "", // 二维码底部内容
        text: "", // 二维码内容
      },
    };
  },
  activated() {
    this.getList();
  },
  mounted() {
    this.getList();
  },
  computed: {
    receiveMaterialUserId() {
      return this.$store.state.menu.userInfo.id;
    },
  },
  methods: {
    // 获取出库列表
    async getList(arg) {
      this.loading = true;
      if (arg === 1) {
        this.pagination.current = 1;
      }
      var params = this.getQueryParams();
      const res = await api.OutStoreFindAll(params);
      this.tableData = res.data.data;
      this.pagination.total = res.data.total;
      this.loading = false;
    },
    // 生成二维码
    handleCode(record) {
      let { outStoreNum } = record;
      let newObj = { outStoreNum, QRCode: CodeNo.Issue };
      let text = JSON.stringify(newObj);
      this.$refs.qrCode.title = "出库二维码";
      this.qrModel.label = `${outStoreNum}`;
      this.qrModel.text = text;
      this.$refs.qrCode.list = this.qrModel.label.split(",");
      this.$refs.qrCode.showModal();
    },
    handleReceiving(record) {
      let { id } = record;
      this.$router.push({ path: `/ware/receiving?id=${id}` });
    },
    async handleOrderReceiving(record) {
      let { outStoreNum, materialPrepareNum } = record;
      const res = await api.OutStoreReceiveMaterial({
        outStoreNum,
        materialPrepareNum,
        receiveMaterialUserId: this.receiveMaterialUserId,
      });
      if (res.code && res.code !== 200) {
        this.$message.error(res.message);
        return;
      }
      this.$message.success(res.message);
      this.getList();
    },
    // 商品明细
    handleWorkResume(record) {
      this.$refs.GoodResume.showDrawer(record);
    },
  },
};
</script>

<style lang="less" scoped>
.card-header {
  margin: 20px 0;
}
button {
  margin-right: 13px;
}
.card-content {
  margin-bottom: 20px;
  .contetnBox {
    border: 1px solid #ebedf0;
    border-radius: 2px;
    padding: 20px 0;
    .headerBox {
      padding: 0 20px;
    }
  }
}
.ant-form-item {
  margin: 10px 0;
}
.tableSpan {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1a5eff;
}

.footer-btn {
  width: 100%;
  text-align: center;
  margin: 37px 0;
  button {
    width: 200px;
    height: 40px;
    background: #1a5eff;
    border-radius: 2px;
  }
}
.requiredNews {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1a5eff;
  margin-bottom: 12px;
}
::v-deep .ant-card-body {
  padding: 12px 24px !important;
}
</style>
